<template>
  <el-row align="middle">
    <el-col :span="6">
      <el-button style="width: 100%" :readonly="true">
        {{ keyStack[0] }}
      </el-button>
    </el-col>
    <el-col :span="6">
      <el-input :model-value="localData.value"
                :readonly="!isKp"
                @input="(result)=>{
                  if(autoCommit){
                    commit('value',result)
                  }
                    this.$emit('valueChange',result)
                  }">

      </el-input>
    </el-col>
    <el-col :span="6">
      <el-input :model-value="localData.max"
                :readonly="!isKp"
                @input="(result)=>{
                  if(autoCommit){
                    commit('max',result)
                  }
                  this.$emit('maxChange',result)
                  }"></el-input>
    </el-col>
    <el-col :span="6">
      <el-input :model-value="localData.doubleMax"
                :readonly="!isKp"
                @input="(result)=>{
                  if(autoCommit){
                    commit('doubleMax',result)
                  }
                    this.$emit('doubleMaxChange',result)
                  }">
      </el-input>
    </el-col>
  </el-row>
  <el-row align="middle">
    <el-col :span="6">
      <el-tag style="width: 100%"
              :color="stateColor[localData.status]"
              effect="dark"
              @click="()=>{if(isKp)groupNext()}">
        {{ localData.status }}
      </el-tag>
    </el-col>
    <el-col :span="18">
      <little-double-max-bar style="width: 100%"
                             bar-height="1.2rem"
                             :bar-data="localData"
                             double-max-color="grew"
                             :value-color="stateColor[localData.status]"
                             :max-color="stateColor[stateGroup[1]]"></little-double-max-bar>

    </el-col>
  </el-row>
</template>

<script>
import {store} from "@/js/store";
import LittleDoubleMaxBar from "@/components/bar/LittleDoubleMaxBar";

export default {
  name: "DoubleMaxBar",
  components: {LittleDoubleMaxBar},
  inject: ['cardIndex', 'isKp'],
  props: {
    keyStack: Array,
    barData: {
      value: String,
      max: String,
      doubleMax: String,
      status: String,
    },
    stateGroup: Array,
    stateColor: {},
    autoCommit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  }, emits: ["value-change", "max-change", "double-max-change", "next-state"],
  mounted() {
  },
  computed: {
    localData() {
      if (this.barData != null) {
        return this.barData
      } else {
        return store.getters.cardData(this.cardIndex, this.keyStack)
      }
    }
  }, methods: {
    groupNext() {
      if (this.autoCommit) {
        let out
        let group = this.stateGroup
        for (let i = 0; group.length > i; i++) {
          if (this.localData.status === group[i]) {
            if (i !== group.length - 1) {
              out = group[i + 1]
            } else {
              out = group[0]
            }
          }
        }
        if (out.length === 0) {
          out = this.localData.status
        }
        this.commit('status', out)
      } else {
        this.$emit('next-state')
      }
    },
    commit(key, payload) {
      store.commit('cardData', {data: payload, index: this.cardIndex, keyStack: [...this.keyStack, key]})
    }
  }
}
</script>

<style scoped>
:deep(el-input) {
  padding: 0;
}
</style>
